
<template>
  <div>
      <h1>列表组件</h1>
      <h1>state: {{num}}</h1>
      <h1>getters: {{douNum}}</h1>
      <h1>{{flag}}</h1>
      <!--lazy 只在change事件触发 
         v-model.trim  去除空格
        v-model.number 转为数字
        -->
      <input type="text" v-model.number="kk">
      <button @click="changeNum(3)">mutations 加3</button>
      <button @click="numActions(5)">actions 加5</button>
      <button @click="changeFlag(false)">改变</button>
      <button @click.stop="say">事件修饰符</button>
  </div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
export default {
  data(){
    return{
      kk:""
    }
  },
  
    computed:{
      ...mapState(["num"]),
      ...mapState("ListOne",["flag"]),
      ...mapGetters(["douNum"])
    },
    methods: {
      ...mapMutations(["changeNum"]),
      ...mapMutations("ListOne",["changeFlag"]),
      ...mapActions(["numActions"]),
      say(){
          // 事件修饰符  @click.stop 
          // .stop 阻止冒泡
          // .self 只元素本身触发事件 子元素不触发
          // .prevent 阻止默认行为
          // .capture 捕获模式
          // .once 只触发一次

          // 键盘事件
          // @keydown.ctrl.shift.65 按下ctrl+shift+A

        // vue 全局加载插件的方法
        // Vue.use(插件,{插件的配置项})
        // Vue.prototype.插件名=导入的插件

        // 将vue实例挂载到哪里 等同于el:"#app"
        // new Vue({}).$mount("#app");
      var vm=new Vue({})
      // vm.$mount();
      // vm.$destroy()//销毁实例
      // vm.$watch()
      // vm.$data
      // vm.$el 
      
      }
    },

    activated() {
        console.log("组件进入")
    },
    deactivated() {
        console.log("组件离开")
    },
}
</script>
<style lang="less">
  
</style>